<template>
  <Layout>
    <Title title="收款单"></Title>
    <el-button type="primary" size="medium" @click="dialogVisible = true">制定单</el-button>

    <div class="body">
      <el-tabs v-model="activeName" :stretch="true">
        <el-tab-pane label="待审批" name="PENDING">
          <div v-if="pendingList.length === 0">
            <el-empty description="暂无数据"></el-empty>
          </div>
          <div v-else>
            <receipt-list :list="pendingList" :type="1" @refresh="getReceipt()"/>
          </div>
        </el-tab-pane>
        <el-tab-pane label="审批完成" name="SUCCESS">
          <div v-if="successList.length === 0">
            <el-empty description="暂无数据"></el-empty>
          </div>
          <div v-else>
            <receipt-list :list="successList" :type="2" @refresh="getReceipt()"/>
          </div>
        </el-tab-pane>
        <el-tab-pane label="审批失败" name="FAILURE">
          <div v-if="failureList.length === 0">
            <el-empty description="暂无数据"></el-empty>
          </div>
          <div v-else>
            <receipt-list :list="failureList" :type="3"/>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <el-dialog
        title="创建单"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose">
      <div style="width: 90%; margin: 0 auto">
        <el-form :model="receiptForm" label-width="100px" ref="receiptForm" :rules="rules">
          <el-form-item label="客户: " prop="customer">
            <el-input v-model="receiptForm.customer"></el-input>
          </el-form-item>
          <el-form-item label="银行账户 : " prop="account">
            <el-input v-model="receiptForm.account"></el-input>
          </el-form-item>
          <el-form-item label="总额汇总: " prop="totalAmount">
            <el-input v-model="receiptForm.totalAmount"></el-input>
          </el-form-item>
          <el-form-item label="备注: " prop="remark">
            <el-input v-model="receiptForm.remark" type="textarea"></el-input>
          </el-form-item>

        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('receiptForm')">立即创建</el-button>
      </span>
    </el-dialog>


  </Layout>
</template>

<script>
import Layout from "@/components/content/Layout";
import Title from "@/components/content/Title";
import {createReceipt, getAllReceipt} from "@/network/finance";
import ReceiptList from "@/views/finance/components/ReceiptList";

export default {
  components: {
    Layout,
    Title,
    ReceiptList
  },
  data() {
    return {
      activeName: 'PENDING',
      receiptList: [],
      pendingList: [],
      successList: [],
      failureList: [],
      dialogVisible: false,
      receiptForm: {
        customer: '',
        account: '',
        operator: '',
        totalAmount: '',
        remark: '',
      },
      completedReceipt: []
    }
  },
  async mounted() {
    this.getReceipt()
    // await getAllReceipt({params: {state: 'SUCCESS'}}).then(_res => {
    //   this.completedReceipt = _res.result
    // })
  },

  methods: {
    //得到全部收款单
    getReceipt() {
      getAllReceipt({}).then(_res => {
        console.log(_res);
        this.receiptList = _res.result
        this.pendingList = this.receiptList.filter(item => item.state === '待审批')
        this.successList = this.receiptList.filter(item => item.state === '审批完成')
        this.failureList = this.receiptList.filter(item => item.state === '审批失败')
      })

    },

    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            this.receiptForm = {}
            done();
          })
          .catch(_ => {
          });
    },
    resetForm() {
      this.receiptForm = {
        customer: '',
        account: '',
        operator: '',
        totalAmount: '',
        remark: '',
      }
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
      if (valid) {

      this.receiptForm.operator = sessionStorage.getItem("name")

        this.receiptForm.totalAmount=Number(this.receiptForm.totalAmount)
        console.log(this.receiptForm)
      createReceipt(this.receiptForm).then(_res => {

        if (_res.msg == 'Success') {
          this.$message.success('创建成功!')
          this.dialogVisible = false
          this.receiptForm = {}
          this.resetForm()
          this.getReceipt()
        }
      }).catch(_err=>{
        console.log(_err)
      })

      }
       })
    }

  }


}
</script>

<style lang="scss" scoped>
.body {
  margin: 0 auto;
  margin-top: 10px;
  height: 80vh;
  overflow-y: auto;
  width: 100%;
  background: rgba($color: #fff, $alpha: 0.5);
}
</style>